<template>
  <div class="breadcrumb-wraper breadcrumb">
    <div style="display: none;"><slot name="separator"></slot></div>
    <slot></slot>
    <breadcrumb-item v-for="(item, index) in itemRender" :key="index" :overlay="item.overlay">
      <slot name="itemRender" :route="item.route" :params="item.params" :routes="item.routes" :paths="item.paths"></slot>
    </breadcrumb-item>
    <!-- <span class="ikmName">
      <span  v-for="(item,index) in ikmname" :key="index+'_ikm'">
        <span @click="ikmClick(item)">{{index ? '/' : ''}}{{item}}</span>
      </span>
    </span> -->
    <!-- <span class="ikmName">
      <span @click="ikmClick(pageNum)">{{ikmname}}</span>
    </span> -->
    <!-- <a-modal :visible="true" :title="123" width="900px" class="contentWrapper">
      <iframe id="name4" frameborder="1"  src="http://www.baidu.com&projectCode=P0000000981&token=5bf41a5d783bee4fbda7b086b72957a23619f23a54d2e776f5418eab2907fa241ec34da67dc10f58a7f8a9d7e503414fe38f519bb74d8666adf1820bb67614eda2bb559cd616dca3c4201dbc1391ec20a4ca4b7a53e5e16e1d7cd13529ba2a53e837f21e9b3b127c3a06d400461963a4612f5a2f3430d898a877101ebd4d0333"></iframe>
      </a-modal> -->
  </div>
</template>
<script>
import breadcrumbItem from './breadcrumbItem'
import { nameUrl } from'@/api/qualityInfoSystem.js'
export default {
  provide() {
    return {
      separator: this.separator,
      separatorNode: this.hasSeparator
    }
  },
  components: { breadcrumbItem },
  props: {
    params: {
      type: Object,
      default: function() {
        return {}
      }
    },
    routes: {
      type: Array,
      default: function() {
        return []
      }
    },
    separator: {
      type: String,
      default: '/'
    }
  },
  data() {
    return {
      itemRender: [],
      isShow: false,
      ikmname: [],
      pageNum: null,
      breadFinalName: null,
    }
  },
  computed: {
    hasSeparator() {
      return this.$slots.separator
    }
  },
  watch: {
    $route(to,from) {
      const _this = this
      // const bread = JSON.parse(sessionStorage.getItem("breadcrumbRoute"))
      // _this.$set(_this,"breadFinalName", bread[bread.length - 1])
      if( to.path == "/single/teamSingle") {
        _this.ikmname = ["如何创建团队？"]
        _this.pageNum = 1
      } else if (to.path == "/single/projectPlan") {
        _this.ikmname = ["如何编制项目计划？"]
        _this.pageNum = 2
      } else if (to.path == "/single/projectAcceptList") {
        _this.ikmname = ["如何编制结项验收表？","如何评审结项验收表？"]
        _this.pageNum = 3
      } else if (to.path == "/single/reviewSingle") {
        _this.ikmname = ["如何做项目评审？"]
        _this.pageNum = 4
      } else if (to.path == "/single/projectPaper") {
        _this.ikmname = ["如何编制项目任务书？","如何变更项目任务书？"]
        _this.pageNum = 5
      } else if (to.path == "/single/questionSingle") {
        _this.ikmname = ["如何处理项目问题？"]
        _this.pageNum = 6
      } else if (to.path == "/single/fileSingle") {
        _this.ikmname = ["如何上传与签审项目文档？"]
        _this.pageNum = 7
      } else if (to.path == "/single/projectAlteration") {
        _this.ikmname = ["如何执行项目变更？"]
        _this.pageNum = 8
      } else if (to.path == "/single/riskSingle") {
        _this.ikmname = ["如何处理项目风险？"]
        _this.pageNum = 9
      } else if (to.path == "/single/simulationManage") {
        _this.ikmname = ["仿真管理操作"]
        _this.pageNum = 10
      } else if (to.path == "/single/testManage") {
        _this.ikmname = ["试验管理操作"]
        _this.pageNum = 11
      } else {
        _this.ikmname = []
        _this.pageNum = null
      }
    }
  },
  mounted() {
    const _this = this
    const bread = JSON.parse(sessionStorage.getItem("breadcrumbRoute"))
    this.$set(this,"breadFinalName", bread && bread[bread.length - 1] ? bread[bread.length - 1] : "")
    // console.log(this.breadFinalName);
    if( this.breadFinalName.href == "/single/teamSingle") {
      _this.ikmname = ["如何创建团队？"]
      _this.pageNum = 1
    } else if (this.breadFinalName.href == "/single/projectPlan") {
      _this.ikmname = ["如何编制项目计划？"]
      _this.pageNum = 2
    } else if (this.breadFinalName.href == "/single/projectAcceptList") {
      _this.ikmname = ["如何编制结项验收表?","如何评审结项验收表?"]
      _this.pageNum = 3
    } else if (this.breadFinalName.href == "/single/reviewSingle") {
      _this.ikmname = ["如何做项目评审？"]
      _this.pageNum = 4
    } else if (this.breadFinalName.href == "/single/projectPaper") {
      _this.ikmname = ["如何编制项目任务书？","如何变更项目任务书？"]
      _this.pageNum = 5
    } else if (this.breadFinalName.href == "/single/questionSingle") {
      _this.ikmname = ["如何处理项目问题?"]
      _this.pageNum = 6
    } else if (this.breadFinalName.href == "/single/fileSingle") {
      _this.ikmname = ["如何上传与签审项目文档？"]
      _this.pageNum = 7
    } else if (this.breadFinalName.href == "/single/projectAlteration") {
      _this.ikmname = ["如何执行项目变更？"]
      _this.pageNum = 8
    } else if (this.breadFinalName.href == "/single/riskSingle") {
      _this.ikmname = ["如何处理项目风险？"]
      _this.pageNum = 9
    } else if (this.breadFinalName.href == "/single/simulationManage") {
      _this.ikmname = ["仿真管理操作"]
      _this.pageNum = 10
    } else if (this.breadFinalName.href == "/single/testManage") {
      _this.ikmname = ["试验管理操作"]
      _this.pageNum = 11
    }
      // this.getName(itemRender)
    if (this.routes.length) {
      let itemRender = []
      this.routes.map((route) => {
        let paths = [], params = this.params
        var path = this.getPath(route.path, params);
        if (path) {
          paths.push(path);
        }
        if (route.children && route.children.length) {
          var overlay = ``
          route.children.map(child => {
            overlay += `<li data-v-4303666e="" role="menuitem" class="ant-dropdown-menu-item">
                <a data-v-4303666e="" target="_blank" rel="noopener noreferrer" href="${child.path}"> ${child.breadcrumbName} </a>
              </li>`
          })
        }
        itemRender.push({
          route,
          params: this.params,
          routes: this.routes,
          paths,
          overlay
        })
      })
      this.itemRender = itemRender
    }
  },
  methods: {
    // ikmClick(data) {
    //   // const paramName = this.pageNum == 1 ? "创建团队" : (this.pageNum == 2 ? "编制项目计划" : (this.pageNum == 3 && data.indexOf("编制结项验收表") != -1 ? "编制结项验收表" : (this.pageNum == 3 && data.indexOf("评审结项验收表") != -1 ? "评审结项验收表" : (this.pageNum == 4 ? "做项目评审":(this.pageNum == 5 && data.indexOf("编制项目任务书") != -1 ? "编制项目任务书" :(this.pageNum == 5 && data.indexOf("变更项目任务书") != -1 ? "变更项目任务书" : (this.pageNum == 6 ? "处理项目问题" : "")))))))
    //   nameUrl({name: data}).then(res => {
    //     // console.log(res.data);
    //     if( res && res.status == 200 ) {
    //       if( res.data.success == true || res.data.success == 'true' ) {
    //         if(res.data.message) {
    //           window.open(res.data.message)
    //         } else {
    //           this.$message.warn("暂无内容查看")
    //         }
    //       } else {
    //         this.$message.error(res.data.message || "请求数据失败")
    //       }
    //     } else {
    //       this.$message.error(res.data.message || "请求数据失败")
    //     }
    //   })
    // },
    getPath(path, params) {
      path = (path || '').replace(/^\//, '');
      Object.keys(params).forEach(function (key) {
        path = path.replace(':' + key, params[key]);
      });
      return path;
    }
  }
}
</script>
<style lang="less" scoped>
  @import './index.less';
  .contentWrapper {
      // height: calc(100% - 80px);
      height: 1000px;
      overflow: scroll;
      div {
        width: 99%;
        height: 100%;
        iframe {
          height: 800px;
          width: 100%;
          overflow: scroll;
        }
      }
    }
</style>